/*!
 * vue-material v1.0.0-beta-7
 * author:Jordan 2018-04-21
 * Released under the MIT License.
 */
html {
    height: 100%;
    box-sizing: border-box;
    transition: background-color .3s cubic-bezier(.25, .8, .25, 1)
}

body {
    height: 100%;
    margin: 0;
}

div,
input {
    box-sizing: border-box;
}

.md-layout {
    display: flex;
    flex-wrap: wrap;
}

.md-layout .md-layout {
    flex: 1;
}

.md-layout .md-layout-nowrap {
    flex-wrap: nowrap
}

.md-layout.md-centered {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto
}

.md-layout-item {
    display: flex;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    flex-shrink: 0 !important;
}

.md-layout-item--contentBasis {
    flex-basis: content !important
}

.md-layout.md-gutter > .md-layout-item {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

@media (min-width:1600px) {
    .md-layout.md-gutter > .md-layout-item {
        padding-right: 14px;
        padding-left: 14px;
    }
}

@media (max-width:1600px) and (min-width:1200px) {
    .md-layout.md-gutter {
        margin-right: -12px;
        margin-left: -12px
    }

    .md-layout.md-gutter > .md-layout-item {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (max-width:1200px) and (min-width:641px) {
    .md-layout.md-gutter {
        margin-right: -8px;
        margin-left: -8px
    }

    .md-layout.md-gutter > .md-layout-item {
        padding-right: 8px;
        padding-left: 8px;
    }
}

@media (max-width:641px) {
    .md-layout.md-gutter {
        margin-right: -4px;
        margin-left: -4px
    }

    .md-layout.md-gutter > .md-layout-item {
        padding-right: 4px;
        padding-left: 4px;
    }
}

.md-alignment-top-left {
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

.md-layout.md-alignment-top-center {
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
}

.md-alignment-top-center {
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}

.md-layout.md-alignment-top-right {
    justify-content: flex-end;
    align-content: flex-start;
    align-items: flex-start;
}

.md-alignment-top-right {
    justify-content: flex-start;
    align-content: flex-end;
    align-items: flex-end;
}

.md-alignment-top-space-around {
    justify-content: space-around;
    align-content: flex-start;
    align-items: flex-start;
}

.md-alignment-top-space-between {
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
}

.md-layout.md-alignment-center-left {
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}

.md-alignment-center-left {
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
}

.md-alignment-center, .md-alignment-center-center {
    justify-content: center;
    align-content: center;
    align-items: center;
}

.md-layout.md-alignment-center-right {
    justify-content: flex-end;
    align-content: center;
    align-items: center;
}

.md-alignment-center-right {
    justify-content: center;
    align-content: flex-end;
    align-items: flex-end;
}

.md-alignment-center-space-around {
    justify-content: space-around;
    align-content: center;
    align-items: center;
}

.md-alignment-center-space-between {
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.md-layout.md-alignment-bottom-left {
    justify-content: flex-start;
    align-content: flex-end;
    align-items: flex-end;
}

.md-alignment-bottom-left {
    justify-content: flex-end;
    align-content: flex-start;
    align-items: flex-start;
}

.md-layout.md-alignment-bottom-center {
    justify-content: center;
    align-content: flex-end;
    align-items: flex-end;
}

.md-alignment-bottom-center {
    justify-content: flex-end;
    align-content: center;
    align-items: center;
}

.md-alignment-bottom-right {
    justify-content: flex-end;
    align-content: flex-end;
    align-items: flex-end;
}

.md-alignment-bottom-space-around {
    justify-content: space-around;
    align-content: flex-end;
    align-items: flex-end;
}

.md-alignment-bottom-space-between {
    justify-content: space-between;
    align-content: flex-end;
    align-items: flex-end;
}

.md-alignment-space-around-left {
    justify-content: flex-start;
    align-content: space-around;
    align-items: space-around;
}

.md-alignment-space-around-center {
    justify-content: center;
    align-content: space-around;
    align-items: space-around;
}

.md-alignment-space-around-right {
    justify-content: flex-end;
    align-content: space-around;
    align-items: space-around;
}

.md-alignment-space-around-space-around {
    justify-content: space-around;
    align-content: space-around;
    align-items: space-around;
}

.md-alignment-space-around-space-between {
    justify-content: space-between;
    align-content: space-around;
    align-items: space-around;
}

.md-alignment-space-between-left {
    justify-content: flex-start;
    align-content: space-between;
    align-items: space-between;
}

.md-alignment-space-between-center {
    justify-content: center;
    align-content: space-between;
    align-items: space-between;
}

.md-alignment-space-between-right {
    justify-content: flex-end;
    align-content: space-between;
    align-items: space-between;
}

.md-alignment-space-between-space-around {
    justify-content: space-around;
    align-content: space-between;
    align-items: space-between;
}

.md-alignment-space-between-space-between {
    justify-content: space-between;
    align-content: space-between;
    align-items: space-between;
}

.md-layout-item, .md-layout-item.md-size {
    flex: 1 1
}

@supports (-moz-appearance: none) {
    .hide-scroll-bar {
        scrollbar-width: none !important;
    }
}

@supports (-webkit-appearance: none) {
    .hide-scroll-bar::-webkit-scrollbar {
        display: none !important;
    }
}
/*因为IE不支持@supports*/
.hide-scroll-bar {
    -ms-overflow-style: none !important;
}

@keyframes resizeanim {
    from {
        opacity: 0;
    }

    to {
        opacity: 0;
    }
}

.resizeanim {
    animation: 1ms resizeanim;
}

.moveInRight {
    animation-name: moveInRight;
}

.moveInLeft {
    animation-name: moveInLeft;
}

.moveInUp {
    animation-name: moveInUp;
}

.moveInDown {
    animation-name: moveInDown;
}

.moveFromTop {
    animation: moveFromTop;
}

.moveOutRight {
    animation-name: moveOutRight;
}

.moveOutLeft {
    animation-name: moveOutLeft;
}

.moveOutUp {
    animation-name: moveOutUp;
}

.moveOutDown {
    animation-name: moveOutDown;
}

@keyframes moveInRight {
    from {
        transform: translate(-100%, 0);
    }

    to {
        transform: translate(0, 0);
    }
}

@keyframes moveInUp {
    from {
        transform: translate(0, 100%);
    }

    to {
        transform: translate(0, 0);
    }
}

@keyframes moveInDown {
    from {
        transform: translate(0, -100%);
    }

    to {
        transform: translate(0, 0);
    }
}

@keyframes moveInLeft {
    from {
        transform: translate(100%, 0);
    }

    to {
        transform: translate(0, 0);
    }
}

@keyframes moveOutRight {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(100%, 0);
    }
}

@keyframes moveOutUp {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(0, -100%);
    }
}

@keyframes moveOutDown {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(0, 100%);
    }
}

@keyframes moveOutLeft {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-100%, 0);
    }
}

@keyframes moveFromTop {
    from {
        transform: translateY(-100%);
    }
}